// 请求本地后端接口/ThData/list的所有数据
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
    if (xhr.readyState == 4 && xhr.status == 200) {
        var data = JSON.parse(xhr.responseText);
        // 根据id将数据进行排序
        data.sort(function (a, b)  {
            return a.id - b.id;
        });
        // 将数据放入到字典里面
        var chartData = {};
        for (var i = 0; i < data.length; i++) {
            chartData[data[i]["id"]] = data[i]["value"];
        }

        // 用Chart.js实现图表展示
        var ctx = document.getElementById('myChart').getContext('2d');
        var myChart = new Chart(ctx, {
            type: 'line',
            data: {
                labels: Object.keys(chartData), //x轴上的标签
                datasets: [{
                    label: '# of Votes',
                    data: Object.values(chartData), //y轴上的数据值
                    backgroundColor: 'rgba(255, 99, 132, 0.2)',
                    borderColor: 'rgba(255, 99, 132, 1)',
                    borderWidth: 1
                }]
            },
            options: {
                scales: {
                    yAxes: [{
                        ticks: {
                            beginAtZero: true
                        }
                    }]
                }
            }
        });
    }
}
xhr.open('GET', '/ThData/list', true);
xhr.send();